<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>基本信息</cite></a>
        <a><cite>商品</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">商品</div>
        <div class="layui-card-body">
            <!-- 查询 -->
            <div class="layui-row" style="margin-bottom:10px">
                <div class="layui-col-md3">
                    <button class="layui-btn" id="add-btn" type="button">新增</button>
                </div>
            </div>
            <div class="layui-row" style="margin-bottom: 10px;">
                <form class="layui-form" lay-filter="formSearch">
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                   style="width: 75px; text-align: left; padding-left: 0;">商品名称:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <input autocomplete="off" class="layui-input" name="name" placeholder="商品名称"
                                       type="text">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                   style="width: 75px; text-align: left; padding-left: 0;">商品产地:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <input autocomplete="off" class="layui-input" name="origin" placeholder="商品产地"
                                       type="text">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                   style="width: 75px; text-align: left; padding-left: 0;">生产厂家:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <input autocomplete="off" class="layui-input" name="producer" placeholder="生产厂家"
                                       type="text">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                   style="width: 75px; text-align: left; padding-left: 0;">计量单位:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <input autocomplete="off" class="layui-input" name="unit" placeholder="计量单位"
                                       type="text">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                   style="width: 75px; text-align: left; padding-left: 0;">进货价格:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <input autocomplete="off" class="layui-input" lay-verify="number" min="0" name="inPrice"
                                       onblur="price_fixed(event)" placeholder="进货价格" step="0.01"
                                       type="number">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                   style="width: 75px; text-align: left; padding-left: 0;">销售价格:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <input autocomplete="off" class="layui-input" lay-verify="number" min="0"
                                       name="outPrice"
                                       onblur="price_fixed(event)" placeholder="销售价格" step="0.01"
                                       type="number">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-inline">
                            <label class="layui-form-label"
                                   style="width: 75px; text-align: left; padding-left: 0;">商品类型:</label>
                            <div class="layui-input-inline" style="width: 200px; ">
                                <input autocomplete="off" class="layui-input" name="goodsType" placeholder="商品类型"
                                       type="text">
                            </div>
                        </div>
                    </div>
                    <button class="layui-btn" id="search-btn" type="button">搜索</button>
                    <button class="layui-btn" id="reset-btn" type="reset">重置</button>
                </form>
            </div>
            <!-- 表格 -->
            <table id="goods-table-parseData" lay-filter="goods-table-parseData"></table>

            <!-- 右侧按钮 -->
            <script id="test-table-operate-barDemo" type="text/html">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>
</div>


<!-- 编辑按钮弹出框 -->
<script id="edit" type="text/html">
    <form class="layui-form" lay-filter="formEdit">
        <div class="layui-row">
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">商品类型:</label>
                    <div class="layui-input-block">
                        <select name="goodsType" id="goodsTypeEdit" lay-verify="">
                            <option value="">---请选择商品类型---</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">名称:</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="商品名称"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">产地:</label>
                    <div class="layui-input-block">
                        <input type="text" name="origin" required lay-verify="required" placeholder="产地"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">厂家:</label>
                    <div class="layui-input-block">
                        <input type="text" name="producer" required lay-verify="required" placeholder="厂家"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">计量单位:</label>
                    <div class="layui-input-block">
                        <input type="text" name="unit" required lay-verify="required" placeholder="计量单位"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">进货价格:</label>
                    <div class="layui-input-block">
                        <input type="number" name="inPrice" required lay-verify="required|number" min="0" step="0.01"
                               placeholder="进货价格" autocomplete="off"
                               onblur="price_fixed(event)"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">销售价格:</label>
                    <div class="layui-input-block">
                        <input type="number" name="outPrice" required lay-verify="required|number" min="0" step="0.01"
                               placeholder="销售价格" autocomplete="off"
                               onblur="price_fixed(event)"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" style="display: none;">
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">id:</label>
                    <div class="layui-input-block">
                        <input type="text" name="uuid" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-col-md8 layui-col-md-offset4">
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn" onclick="editShop()">确认</button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>
<!-- 新增按钮弹出框 -->
<script id="add" type="text/html">
    <form class="layui-form" lay-filter="formAdd">
        <div class="layui-row">
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">商品类型:</label>
                    <div class="layui-input-block">
                        <select name="goodsType" id="goodsType" lay-verify="">
                            <option value="">---请选择商品类型---</option>

                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">名称:</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="商品名称"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">产地:</label>
                    <div class="layui-input-block">
                        <input type="text" name="origin" required lay-verify="required" placeholder="产地"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">厂家:</label>
                    <div class="layui-input-block">
                        <input type="text" name="producer" required lay-verify="required" placeholder="厂家"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">计量单位:</label>
                    <div class="layui-input-block">
                        <input type="text" name="unit" required lay-verify="required" placeholder="计量单位"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">进货价格:</label>
                    <div class="layui-input-block">
                        <input type="number" name="inPrice" required lay-verify="required|number" min="0" step="0.01"
                               placeholder="进货价格" autocomplete="off"
                               onblur="price_fixed(event)"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">销售价格:</label>
                    <div class="layui-input-block">
                        <input type="number" name="outPrice" required lay-verify="required|number" min="0" step="0.01"
                               placeholder="销售价格" autocomplete="off"
                               onblur="price_fixed(event)"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-col-md8 layui-col-md-offset4">
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn" onclick="addShop()">新增</button>
                        <button type="button" class="layui-btn layui-btn-primary closeLayer" onclick="closeLayer()">取消
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

<script>
    layui.use(['admin', 'table', 'form'], function () {
        var admin = layui.admin
            , table = layui.table
            , form = layui.form
            , baseUrl = layui.setter.baseUrl
            , $ = layui.$;

        // 表格渲染
        var tableIns = table.render({
            elem: '#goods-table-parseData'
            // 请求地址
            , url: baseUrl + 'goods/listByPage'
            , toolbar: true
            , title: '商品表'
            , cellMinWidth: 120
            // 是否开启加载loding
            , loading: true
            // 数据渲染规定
            , cols: [[
                {field: 'uuid', title: '商品编号', width: 110,}
                , {field: 'name', title: '商品名称'}
                , {field: 'origin', title: '商品产地'}
                , {field: 'producer', title: '生产厂家'}
                , {field: 'unit', title: '计量单位'}
                , {field: 'inPrice', title: '进货价格', templet: '<div>{{d.inPrice ? d.inPrice.toFixed(2) : ""}}</div>'}
                , {field: 'outPrice', title: '销售价格', templet: '<div>{{d.outPrice ? d.outPrice.toFixed(2) : ""}}</div>'}
                , {field: 'goodsType', title: '商品类型'}
                , {title: '操作', toolbar: '#test-table-operate-barDemo', width: 120, fixed: 'right'}
            ]]
            // 开启分页
            , page: true
            , request: {
                pageName: 'page',
                limitName: 'rows'
            }
            , response: {
                // statusName: 'code',
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
        });

        // 表格按钮功能设置
        table.on('tool(goods-table-parseData)', function (obj) {
            var data = obj.data;
            // 删除按钮弹窗
            if (obj.event === 'del') {
                layer.confirm('是否删除该数据,删除后不可恢复!', {title: '删除'}, function (index) {
                    // 获取该数据id
                    // 发送登录请求
                    admin.req({
                        url: baseUrl + 'goods',
                        type: 'delete',
                        data: {
                            id: data.uuid
                        },
                        done: function (res) {
                            layer.open({
                                title: '删除'
                                , content: res.msg
                            });
                            table.reload('goods-table-parseData');
                        }
                    })
                });
            }
            // 编辑按钮弹窗
            if (obj.event === 'edit') {
                admin.req({
                    url: baseUrl + 'goods/goodstypelist',
                    done: function (res) {
                        $.each(res.data.rows, function (i, item) {
                            $('#goodsTypeEdit').append(`<option value="${item.uuid}">${item.name}</option>`)
                        })
                        form.render(null, 'formEdit');
                        admin.req({
                            url: baseUrl + 'goods/selectone',
                            data: {
                                id: data.uuid
                            },
                            done: function (res) {
                                res = res.data.rows;
                                res.inPrice = res.inPrice.toFixed(2);
                                res.outPrice = res.outPrice.toFixed(2);
                                form.val("formEdit", res);
                            }
                        })
                    }
                })
                // 请求数据

                layer.open({
                    title: "编辑",
                    type: 1,
                    move: false,
                    area: '500px',
                    content: $('#edit').html()
                });


            }
        });
        // 新增按钮弹出框
        $('#add-btn').click(function () {

            layer.closeAll();
            layer.open({
                title: "新增",
                type: 1,
                move: false,
                area: '500px',
                content: $('#add').html()
            });
            admin.req({
                url: baseUrl + 'goods/goodstypelist',
                done: function (res) {
                    $.each(res.data.rows, function (i, item) {
                        $('#goodsType').append(`<option value="${item.uuid}">${item.name}</option>`)
                    })
                    form.render(null, 'formAdd');
                }
            })

        })
        // 搜索功能
        $('#search-btn').click(function () {
            var data = form.val('formSearch');
            tableIns.reload({
                where: data,
                page: {
                    curr: 1
                }
            })
        })
    });

    // 关闭弹框
    function closeLayer() {
        layer.closeAll();
    }

    // 新增功能提交
    function addShop() {
        var data = layui.form.val("formAdd");
        layui.admin.req({
            url: layui.setter.baseUrl + 'goods/add',
            type: 'post',
            data: data,
            done: function (res) {
                layer.closeAll();
                layer.open({
                    title: '新增'
                    , content: res.msg
                });
                layui.table.reload('goods-table-parseData');
            }
        })
    }

    // 编辑功能提交
    function editShop() {
        var data = layui.form.val("formEdit");
        layui.admin.req({
            url: layui.setter.baseUrl + '/goods/update',
            type: 'post',
            data: data,
            done: function (res) {
                layer.closeAll();
                layer.open({
                    title: '编辑'
                    , content: res.msg
                });
                layui.table.reload('goods-table-parseData');
            }
        })
    }

    // 两位小数
    function price_fixed(e) {
        const val = e.target.value;
        e.target.value = Number(val).toFixed(2);
    }

</script>

<style>
    .layui-col-md3,
    #reset-btn,
    #search-btn {
        margin-top: 10px;
    }
</style>